<template>
  <el-dialog
    v-model="dialogVisible"
    title="月总结与下月计划"
    :width="dialogWidth"
    :before-close="handleBeforeClose"
    destroy-on-close
  >
    <!-- 月份选择器 -->
    <div class="date-picker-container">
      <el-date-picker
        v-model="currentMonth"
        type="month"
        format="YYYY年MM月"
        value-format="YYYY-MM"
        placeholder="选择月份"
        @change="loadMonthData"
      />
    </div>

    <!-- 月总结区域 -->
    <div class="section">
      <h3 class="section-title">一、月总结</h3>
      
      <!-- 本月主要行程 -->
      <div class="sub-section">
        <h4 class="sub-title">1. 本月主要行程</h4>
        <el-table
          :data="summaryScheduleData"
          border
          class="schedule-table"
        >
          <el-table-column
            label="周次"
            prop="week"
            width="80"
            align="center"
          />
          <el-table-column
            label="行程内容"
          >
            <template #default="scope">
              <el-input
                v-model="scope.row.content"
                type="textarea"
                placeholder="请输入行程内容"
                resize="none"
                class="content-input"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 本月业绩统计 -->
      <div class="sub-section">
        <h4 class="sub-title">2. 本月业绩统计</h4>
        <el-table
          :data="summaryPerformanceData"
          border
          class="performance-table"
        >
          <el-table-column
            label="统计项"
            prop="name"
            width="180"
            align="center"
          />
          <el-table-column
            label="数量/详情"
          >
            <template #default="scope">
              <el-input
                v-model="scope.row.value"
                placeholder="请输入数量或详情"
                class="content-input"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 本月工作小结 -->
      <div class="sub-section">
        <h4 class="sub-title">3. 本月工作小结及其他事项</h4>
        <el-input
          v-model="monthSummary"
          type="textarea"
          :rows="4"
          placeholder="请输入本月工作小结"
          class="summary-input"
        />
      </div>
    </div>

    <!-- 下月计划区域 -->
    <div class="section">
      <h3 class="section-title">二、下月计划</h3>
      
      <!-- 下月工作计划 -->
      <div class="sub-section">
        <h4 class="sub-title">1. 下月工作计划</h4>
        <el-table
          :data="nextMonthPlanData"
          border
          class="plan-table"
        >
          <el-table-column
            label="周次"
            prop="week"
            width="80"
            align="center"
          />
          <el-table-column
            label="计划内容"
          >
            <template #default="scope">
              <el-input
                v-model="scope.row.content"
                type="textarea"
                placeholder="请输入计划内容"
                resize="none"
                class="content-input"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 下月业绩目标 -->
      <div class="sub-section">
        <h4 class="sub-title">2. 下月业绩目标</h4>
        <el-table
          :data="nextMonthTargetData"
          border
          class="target-table"
        >
          <el-table-column
            label="目标项"
            prop="name"
            width="180"
            align="center"
          />
          <el-table-column
            label="目标值/详情"
          >
            <template #default="scope">
              <el-input
                v-model="scope.row.value"
                placeholder="请输入目标值或详情"
                class="content-input"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 下月工作安排 -->
      <div class="sub-section">
        <h4 class="sub-title">3. 下月工作安排及其他事项</h4>
        <el-input
          v-model="nextMonthArrangement"
          type="textarea"
          :rows="4"
          placeholder="请输入下月工作安排"
          class="summary-input"
        />
      </div>
    </div>

    <!-- 底部按钮 -->
    <template #footer>
      <el-button @click="handleCancel">关闭</el-button>
      <el-button type="primary" @click="saveForm">保存</el-button>
      <el-button type="success" @click="submitForm">提交</el-button>
      <el-button type="warning" @click="resetForm">重置</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 组件属性定义
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  dialogWidth: {
    type: String,
    default: '1000px'
  },
  initialData: {
    type: Object,
    default: () => ({})
  }
})

// 组件事件定义
const emits = defineEmits([
  'update:modelValue',
  'close',
  'save',
  'submit'
])

// 内部显示状态
const dialogVisible = ref(props.modelValue)

// 监听v-model双向绑定
watch(
  () => props.modelValue,
  (newVal) => {
    dialogVisible.value = newVal
  }
)
watch(
  () => dialogVisible.value,
  (newVal) => {
    emits('update:modelValue', newVal)
  }
)

// 当前选中月份（默认当前月）
const currentMonth = ref<string>(() => {
  const now = new Date()
  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
})

// 月总结默认数据（优先使用initialData，否则用预设值）
const monthSummary = ref<string>(
  props.initialData.monthSummary || 
  `1. 本月顺利完成月度销售目标的90%，重点跟进了A、B两个大客户的合作项目，其中A客户已签订年度合同。
2. 团队培训效果显著，组织了3场产品知识培训，参与率100%，员工考核平均分提升15%。
3. 市场活动方面，本月举办的线下推广活动共获取新客户23家，超出预期目标。
4. 存在问题：部分区域客户反馈响应速度较慢，下月将优化客服流程。`
)

// 本月行程默认数据
const summaryScheduleData = ref([
  { 
    week: '第一周', 
    content: props.initialData.summarySchedule?.[0]?.content || 
             '1. 参加公司年度战略会议；2. 拜访华东区域重要客户；3. 制定本月销售计划' 
  },
  { 
    week: '第二周', 
    content: props.initialData.summarySchedule?.[1]?.content || 
             '1. 组织团队产品培训；2. 跟进A客户合同细节；3. 参加行业展会' 
  },
  { 
    week: '第三周', 
    content: props.initialData.summarySchedule?.[2]?.content || 
             '1. 开展线下推广活动；2. 与B客户洽谈合作方案；3. 整理客户反馈数据' 
  },
  { 
    week: '第四周', 
    content: props.initialData.summarySchedule?.[3]?.content || 
             '1. 完成月度业绩统计；2. 召开团队总结会议；3. 准备下月工作计划' 
  }
])

// 本月业绩统计默认数据
const summaryPerformanceData = ref([
  { 
    name: '本月总计新增客源', 
    value: props.initialData.summaryPerformance?.[0]?.value || '45家（其中线上渠道28家，线下活动17家）' 
  },
  { 
    name: '本月总计新增会员', 
    value: props.initialData.summaryPerformance?.[1]?.value || '23人（转化率51%）' 
  },
  { 
    name: '本月总计成交情况', 
    value: props.initialData.summaryPerformance?.[2]?.value || '12单，总金额86万元（完成月度目标的90%）' 
  }
])

// 下月工作安排默认数据
const nextMonthArrangement = ref<string>(
  props.initialData.nextMonthArrangement || 
  `1. 重点推进B客户的合作项目签约，计划月底前完成合同签订。
2. 优化客户服务流程，建立快速响应机制，提升客户满意度。
3. 启动新员工入职培训，为期一周，覆盖产品知识和销售技巧。
4. 筹备季度营销活动，预算已获批，计划下月初启动方案策划。`
)

// 下月工作计划默认数据
const nextMonthPlanData = ref([
  { 
    week: '第一周', 
    content: props.initialData.nextMonthPlan?.[0]?.content || 
             '1. 与B客户最终确认合作细节；2. 召开新员工入职会议；3. 制定季度活动策划方案' 
  },
  { 
    week: '第二周', 
    content: props.initialData.nextMonthPlan?.[1]?.content || 
             '1. 开展新员工培训；2. 拜访华南区域潜在客户；3. 跟进A客户首单交付' 
  },
  { 
    week: '第三周', 
    content: props.initialData.nextMonthPlan?.[2]?.content || 
             '1. 组织客户满意度调研；2. 优化销售流程；3. 准备季度业绩报告' 
  },
  { 
    week: '第四周', 
    content: props.initialData.nextMonthPlan?.[3]?.content || 
             '1. 举办季度营销活动；2. 完成月度工作总结；3. 规划下下月重点工作' 
  }
])

// 下月业绩目标默认数据
const nextMonthTargetData = ref([
  { 
    name: '下月目标新增客源', 
    value: props.initialData.nextMonthTarget?.[0]?.value || '50家（线上渠道占比60%以上）' 
  },
  { 
    name: '下月目标新增会员', 
    value: props.initialData.nextMonthTarget?.[1]?.value || '30人（转化率提升至55%）' 
  },
  { 
    name: '下月目标成交情况', 
    value: props.initialData.nextMonthTarget?.[2]?.value || '15单，总金额突破100万元' 
  }
])

// 加载月份数据
const loadMonthData = (month: string) => {
  if (!month) return
  
  ElMessage.info(`正在加载 ${month} 的数据...`)
  // 实际项目中可替换为接口请求
}

// 保存表单
const saveForm = () => {
  const formData = {
    month: currentMonth.value,
    monthSummary: monthSummary.value,
    summarySchedule: summaryScheduleData.value,
    summaryPerformance: summaryPerformanceData.value,
    nextMonthArrangement: nextMonthArrangement.value,
    nextMonthPlan: nextMonthPlanData.value,
    nextMonthTarget: nextMonthTargetData.value
  }
  
  emits('save', formData)
  ElMessage.success('数据已保存')
}

// 提交表单
const submitForm = () => {
  if (!monthSummary.value.trim()) {
    ElMessage.warning('请填写本月工作小结')
    return
  }
  
  const formData = {
    month: currentMonth.value,
    monthSummary: monthSummary.value,
    summarySchedule: summaryScheduleData.value,
    summaryPerformance: summaryPerformanceData.value,
    nextMonthArrangement: nextMonthArrangement.value,
    nextMonthPlan: nextMonthPlanData.value,
    nextMonthTarget: nextMonthTargetData.value
  }
  
  emits('submit', formData)
  ElMessage.success('数据已提交')
}

// 重置表单
const resetForm = () => {
  ElMessageBox.confirm('确定要重置所有内容吗？', '确认重置', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 重置为默认数据
    monthSummary.value = props.initialData.monthSummary || monthSummary.value
    nextMonthArrangement.value = props.initialData.nextMonthArrangement || nextMonthArrangement.value
    
    summaryScheduleData.value = [
      { week: '第一周', content: props.initialData.summarySchedule?.[0]?.content || summaryScheduleData.value[0].content },
      { week: '第二周', content: props.initialData.summarySchedule?.[1]?.content || summaryScheduleData.value[1].content },
      { week: '第三周', content: props.initialData.summarySchedule?.[2]?.content || summaryScheduleData.value[2].content },
      { week: '第四周', content: props.initialData.summarySchedule?.[3]?.content || summaryScheduleData.value[3].content }
    ]
    
    // 其他数据重置...
    ElMessage.info('表单已重置')
  })
}

// 关闭弹窗
const handleCancel = () => {
  dialogVisible.value = false
  emits('close')
}

// 弹窗关闭前回调
const handleBeforeClose = (done: () => void) => {
  ElMessageBox.confirm('确定要关闭吗？未保存的数据将丢失', '确认关闭', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'info'
  }).then(() => {
    done()
    emits('close')
  }).catch(() => {})
}
</script>

<style scoped>
.date-picker-container {
  margin-bottom: 20px;
}

.section {
  margin-bottom: 30px;
  padding: 15px;
  background-color: #f9fafb;
  border-radius: 4px;
}

.section-title {
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 16px;
  color: #1f2937;
}

.sub-section {
  margin-bottom: 25px;
}

.sub-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

/* 表格样式 */
.schedule-table,
.performance-table,
.plan-table,
.target-table {
  margin-bottom: 10px;
  --el-table-row-height: 50px;
}

:deep(.el-table th) {
  background-color: #f3f4f6;
  font-weight: 500;
}

/* 输入框样式 */
.content-input {
  width: 100%;
  border: none;
  padding: 4px 0;
  background: transparent;
}

.content-input:focus {
  outline: none;
  background-color: #f0f9ff;
}

.summary-input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px 12px;
}

.summary-input:focus {
  border-color: #3b82f6;
  outline: none;
}
</style>